<template>
    <el-row>
        <el-row :gutter="24">
            <el-col :span="6">
                <el-card shadow="hover" class="col-card">
                    <el-row>今日交易额</el-row>
                    <el-row class="col-num-wrap">
                        <span class="col-num">{{dateNowCount}}</span>
                    </el-row>
                    <el-row style="font-size:14px">
                        较前一天
                        <span class="col-num-add">
                            <span v-show="dateNowCount >= dateCount">+</span>
                            <span v-if="!dateCount">0%</span>
                            <span v-else>{{((dateNowCount - dateCount)/dateCount*100).toFixed(2)}}%</span>
                        </span>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="col-card">
                    <el-row>今日待交易额</el-row>
                    <el-row class="col-num-wrap">
                        <span class="col-num">{{dateNowSum}}</span>
                    </el-row>
                    <el-row style="font-size:14px">
                        较前一天
                        <span class="col-num-add">
                            <span v-show="dateNowSum >= dateSum">+</span>
                            <span v-if="!dateSum">0%</span>
                            <span v-else>{{((dateNowSum - dateSum)/dateSum*100).toFixed(2)}}%</span>
                        </span>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="col-card">
                    <el-row>总交易金额</el-row>
                    <el-row class="col-num-wrap">
                        <span class="col-num">{{tradeCount}}</span>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="col-card">
                    <el-row>总待交易额</el-row>
                    <el-row class="col-num-wrap">
                        <span class="col-num">{{tradeSum}}</span>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <el-card shadow="never" style="margin:24px 0;">
            <el-row style="margin-bottom:24px">
                <el-col :span="6">
                    交易分析
                </el-col>
                <el-col :span="18" style="text-align:right">
                    <el-date-picker v-model="timeRange" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width:240px" @change="changeTime">
                    </el-date-picker>
                </el-col>
            </el-row>
            <IEcharts :option="option" style="height:300px;width:875px"></IEcharts>
        </el-card>
        <el-card shadow="never" style="margin-bottom:60px">
            <el-form label-width="100px" style="padding:20px;background:#f8f8f8;margin-bottom:16px">
                <el-form-item label="创建时间：">
                    <el-date-picker v-model="search.time" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" style="width:510px">
                    </el-date-picker>
                </el-form-item>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="单号：">
                            <el-input v-model="search.tradeid" placeholder="请输入单号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item label="状态：">
                            <el-select v-model="search.status" style="width:160px">
                                <el-option label="全部" :value="-1"></el-option>
                                <el-option label="已付款" :value="1"></el-option>
                                <el-option label="未付款" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="goSearch">筛选</el-button>
                    <el-button type="text" @click="clearSearch">清空</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="data">
                <el-table-column prop="tradeid" label="单号" header-align="center" align="center"></el-table-column>
                <el-table-column label="用户" header-align="center">
                    <template slot-scope="scope">
                        <div style="display:flex">
                            <img :src="scope.row.user.avatarUrl" alt="" style="width:50px;height:50px;border-radius:50%">
                            <div style="flex:1;padding:2px 7px">
                                <div class="text_overflow text_overflow_line_2">{{scope.row.user.nickName}}</div>
                                <div style="margin-top:4px">{{scope.row.user.province}} {{scope.row.user.country}} {{scope.row.user.city}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="money" label="交易额" header-align="center" align="center"></el-table-column>
                <el-table-column label="状态" header-align="center" align="center">
                    <template slot-scope="scoped">
                        <el-row style="font-weight:700;color:#19be6b" v-if="scoped.row.status">已付款</el-row>
                        <el-row style="font-weight:700;color:#f50" v-else>未付款</el-row>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" header-align="center" align="center">
                    <template slot-scope="scope">
                        <el-row>{{format(scope.row.created_at)}}</el-row>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="total,prev,pager,next" background :total="pagination.rowCount" :current-page="pagination.page" :page-size="pagination.pageSize" @current-change="changePage" style="float:right;margin:24px 0"></el-pagination>
        </el-card>
    </el-row>
</template>

<script>
export default {
    layout: "shop",
    data() {
        return {
            dateNowCount: 0, //今日交易额
            dateCount: 0, //昨日交易额
            dateNowSum: 0, //今日待交易额
            dateSum: 0, //昨日待交易额
            tradeCount: 0, //总交易额
            tradeSum: 0, //总待交易额
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            },
            timeRange: [
                new Date(new Date().getTime() - 3600 * 1000 * 24 * 7),
                new Date()
            ],
            option: {
                title: {
                    text: ""
                },
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    data: ["交易金额", "待交易金额"]
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [],
                    axisLabel: {
                        interval: 0,
                        rotate: 50
                    }
                },
                yAxis: {
                    type: "value"
                },
                series: [
                    {
                        name: "交易金额",
                        type: "line",
                        smooth: true,
                        data: []
                    },
                    {
                        name: "待交易金额",
                        type: "line",
                        smooth: true,
                        data: []
                    }
                ]
            },
            search: {
                time: [],
                tradeid: "",
                status: -1
            },
            data: [],
            pagination: {
                page: 1
            }
        };
    },
    mounted() {
        this.getData();
        this.getTradeChart();
        this.getTradeList();
    },
    methods: {
        //交易分析
        async getData() {
            const res = await this.$axios.$get(`/api/app/home/analysis/trade`);
            if (res && res.errmsg === "ok") {
                this.dateNowCount = Number(res.data.dateNowCount);
                this.dateCount = Number(res.data.dateCount);
                this.dateNowSum = Number(res.data.dateNowSum);
                this.dateSum = Number(res.data.dateSum);
                this.tradeCount = Number(res.data.tradeCount);
                this.tradeSum = Number(res.data.tradeSum);
            }
        },
        //交易分析折线图
        async getTradeChart() {
            const res = await this.$axios.$post(
                `/api/app/home/analysis/tradeChart`,
                [this.format(this.timeRange[0]), this.format(this.timeRange[1])]
            );
            if (res && res.errmsg === "ok") {
                this.option.xAxis.data = res.data.dates;
                this.option.series[0].data = res.data.dataCount;
                this.option.series[1].data = res.data.dataSum;
            }
        },
        changeTime(value) {
            if (value) {
                this.timeRange = value;
                this.getTradeChart();
            }
        },
        //交易列表
        async getTradeList() {
            const res = await this.$axios.$post(
                `/api/app/home/analysis/tradeList`,
                {
                    tradeid: this.search.tradeid,
                    started_at: this.search.time.length
                        ? this.search.time[0]
                        : "",
                    ended_at: this.search.time.length
                        ? this.search.time[1]
                        : "",
                    status: this.search.status == -1 ? "" : this.search.status,
                    page: this.pagination.page
                }
            );
            if (res && res.errmsg === "ok") {
                this.data = res.data.data;
                this.pagination = res.data.pagination;
            }
        },
        changePage(page) {
            this.pagination.page = page;
            this.getTradeList();
        },
        goSearch() {
            this.pagination.page = 1;
            this.getTradeList();
        },
        clearSearch() {
            this.search = {
                time: [],
                tradeid: "",
                status: -1
            };
            this.pagination.page = 1;
            this.getTradeList();
        }
    }
};
</script>
<style scoped>
.col-card {
    text-align: center;
    height: 160px;
    padding: 20px 0;
}
.col-num-wrap {
    font-size: 14px;
    margin-top: 10px;
}
.col-num {
    font-size: 20px;
    font-weight: 500;
}
.col-num-add {
    color: #ff4e22;
}
</style>

